<template>
  <div :id="id" class="orderArea"></div>
</template>
<script>
import echarts from "echarts";
import echartsTheme from "@/plugins/wyz-echarts/theme/sweet-light.json";
export default {
  props: {
    chardata: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data: () => ({
    id: "lineChart",
    myChart: null
  }),
  watch: {
    type: v => {
      this.initOption(v);
    },
    chardata: {
      handler(newval) {
        this.loadChart(newval);
      },
      immediate: true,
      deep: true
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  mounted() {
    this.loadChart();
    // this.chardata = this.initOption;
  },
  methods: {
    loadChart(chardata = this.initOption()) {
      this.$nextTick(() => {
        echarts.registerTheme("westeros", echartsTheme);
        this.myChart = echarts.init(
          document.getElementById(this.id),
          "westeros"
        );
        this.myChart.setOption(chardata);
      });
    },
    initOption() {
      let data = {
        title: {
          // text: "告警"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["资产位置变更", "低电量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "资产位置变更",
            type: "line",
            stack: "总量",
            data: [1, 0, 2, 5, 10, 0, 0]
          },
          {
            name: "低电量",
            type: "line",
            stack: "总量",
            data: [0, 0, 0, 7, 0, 11, 2]
          }
        ]
      };
      return data;
    }
  }
};
</script>
